<template>
  <div class="right-info-panel">
    <div class="contact-info">
      <!-- 联系人头像 -->
      <div class="contact-avatar">
        <el-avatar 
          :src="Info?.avatar || 'https://ui-avatars.com/api/?name=默认用户&background=random&size=128'" 
          v-if="Info"
          class="avatar"
          :style="{ backgroundColor: '#409eff' }"
        />
        <el-avatar 
          :src="'https://ui-avatars.com/api/?name=未选择联系人&background=random&size=128'" 
          v-else
          class="avatar"
          :style="{ backgroundColor: '#f5f5f5', color: '#999' }"
        />
      </div>
      <div class="contact-name">{{ Info?.name || '未选择联系人' }}</div>

      <div class="action-buttons">
        <el-button type="primary" size="small" @click="handleSentMessage(Info)">发消息</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </div>

      <div class="contact-details" v-if="Info?.receiver_type === 1 || Info?.type === 1">
        <h3>个人信息</h3>
        <div class="detail-item">
          <span class="detail-label">昵称：</span>
          <span class="detail-value">{{ Info?.nickname || Info?.name }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">手机号：</span>
          <span class="detail-value">{{ Info?.phone }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">邮箱：</span>
          <span class="detail-value">{{ Info?.email }}</span>
        </div>
      </div>
      <div class="contact-details" v-else>
        <h3>群聊信息</h3>
        <div class="detail-item">
          <span class="detail-label">群聊名称：</span>
          <span class="detail-value">{{ Info?.name }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">群聊描述：</span>
          <span class="detail-value">{{ Info?.description || Info?.announcement }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref } from 'vue'
import { defineEmits } from 'vue'
import { defineProps } from 'vue'

const props = defineProps({
  activeContact: { // 这里接收的是对应父组件的属性名，不是传递的变量名
    type: Object,
    default: null
  },
  selectedUser: { // 这里接收的是对应父组件的属性名，不是传递的变量名
    type: Object,
    default: null
  }
})

const Info = ref(null) // 群聊中选中的用户信息
const emits = defineEmits(['sentMessage'])  // 对于用户进行发送消息

const handleSentMessage = (Info) => {
  console.log('发送消息给对应用户:', Info)
  emits('sentMessage', {
    ...Info,
    receiver_type: Info?.receiver_type ||Info?.type, // 1表示私聊，2表示群聊
  })
}

// 监听 activeContact 变化（示例）
watch(
  () => props.activeContact,
  (newVal) => {
    if (newVal) {
      Info.value = null
      Info.value = newVal
      console.log('当前会话已切换:', newVal)
      // 可在此加载对应会话的历史消息
    }
  },
  { immediate: true }
)
// 监听 selectedUser 变化（示例）
watch(
  () => props.selectedUser,
  (newVal) => {
    if (newVal) {
      Info.value = null
      Info.value = newVal
      console.log('群聊中当前选中用户已切换:', newVal)
      // 可在此加载对应用户的详细信息
    }
  },
  { immediate: true }
)



</script>

<style scoped>
.right-info-panel {
  width: 200px;
  background-color: white;
  padding: 20px;
  overflow-y: auto;
}

.contact-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar { 
  width: 100%;
  height: 100%;
}
.contact-name {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-details {
  margin-bottom: 20px;
}

.contact-details h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: #333;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-label {
  color: #999;
}

.detail-value {
  color: #333;
}
</style>